<template>
	<view class="notice">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="content">
			<u-grid :col="3" :border="false" class="notice-type">
				<u-grid-item v-for="(item,index) in menuList" :key="index" @click="pageRoute(item.url)">
					<view class="icon">
						<u-image :src="imgHost+item.icon" width="80" height="80"></u-image>
						<u-badge max="99" :value="item.count" :absolute="true" :offset="[3,12]"></u-badge>
					</view>
					<view class="label">{{item.label}}</view>
				</u-grid-item>
			</u-grid>

			<view class="notice-msg">
				<view class="msg-list">
					<view class="msg-item" v-for="(item,index) in list" :key="index">
						<view class="msg-info" @click="read(item)">
							<view class="top">
								<text class="name">订单消息</text>
								<text class="time">{{item.create_time}}</text>
							</view>
							<view class="other">
								<text class="desc u-line-1">
									{{item.order_sn}}
								</text>
								<u-badge v-if="item.has_read == 0" value="未"></u-badge>
							</view>
							<view class="other">
								<text class="desc u-line-1">
									{{item.action_note}}
								</text>
							</view>
						</view>
					</view>
					<view class="msg-empty" style="text-align:center;justify-items:center;align-items:center;"
						v-if="list.length<=0">
						<text>
							暂无数据~
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '消息',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		menuList: [],
		isMore: true,
		list: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		state.menuList = [{
			label: '交易信息',
			icon: '/static/images/notice/icon-trade.png',
			url: '/servePages/notice/notice',
			count: 119
		}, {
			label: '活动信息',
			icon: '/static/images/notice/icon-activity.png',
			url: '/servePages/notice/activity',
			count: 0
		}, {
			label: '系统信息',
			icon: '/static/images/notice/icon-system.png',
			url: '/servePages/notice/system',
			count: 17
		}, {
			label: '待办信息',
			icon: '/static/images/notice/icon-activity.png',
			url: '/servePages/notice/todo',
			count: 99
		}];

		state.list = [{
			id: 1,
			order_sn: 'bjy_20250905160941550',
			has_read: 0,
			action_note: '订单付款成功',
			create_time: '2025-09-05 16:09:41'
		}, {
			id: 2,
			order_sn: 'bjy_20250905160941550',
			has_read: 1,
			action_note: '你提交了订单，请等待系统确认',
			create_time: '2025-09-05 16:09:41'
		}, {
			id: 3,
			order_sn: 'bjy_20250905160941550',
			has_read: 1,
			action_note: '订单付款成功',
			create_time: '2025-09-05 16:09:41'
		}, {
			id: 4,
			order_sn: 'bjy_20250905160941550',
			has_read: 0,
			action_note: '你提交了订单，请等待系统确认',
			create_time: '2025-09-05 16:09:41'
		}];
	}

	function read(item) {
		console.log('消息已读', item);
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		menuList,
		isMore,
		list,
	} = toRefs(state);
</script>

<style lang="scss">
	.notice {
		.content {
			padding: $m24;

			.notice-type {
				overflow: hidden;
				border-radius: $radius-12;
				background-color: $u-bg-reverse-color;

				.icon {
					display: block;
					margin: 0 auto;
				}

				.label {
					margin-top: $m16;
					text-align: center;
				}
			}

			.notice-msg {
				overflow: hidden;
				margin-top: $m24;
				background-color: $u-bg-reverse-color;
				border-radius: $radius-12;

				.msg-list {
					padding: $m24;

					.msg-item {
						@include f-between;
						padding: $m24 0;
						border-bottom: 1px solid $u-border-color;

						&:last-child {
							border-bottom: none;
						}

						.msg-info {
							overflow: hidden;
							flex: 1;

							.top,
							.other {
								@include f-between;

								.time,
								.desc {
									font-size: $font-24;
									color: $u-tips-color;
								}

								.desc {
									flex: 1;
								}
							}

							.name {
								font-size: $font-30;
								font-weight: 500;
								color: $u-main-color;
							}
						}
					}

					.msg-empty {
						padding: $m24 0;
					}
				}
			}
		}
	}
</style>